<template>
  <panel title=" ">
    <span slot="title-extra"></span>
    <div class="middle-area-districtLeft col-10">
      <x-row class="text-content text-content-top">
        <div class="col-14">
          <x-col :span="item.span" v-for="(item, index) in info">
            <text-box
              title-place="bottom"
              :title="item.title"
              :value="item.value"
              :unit="item.unit"
              :type="item.type"
              :unit-font-size="index === 1 ? '13px' : ''"
              number-font-size="40px">
            </text-box>
          </x-col>
        </div>
      </x-row>
    </div>
    <div class="col-14 accessControl">
      <open-total :controlInfo="info2"></open-total>
    </div>
  </panel>
</template>

<script>
import formatDate from 'filters/format-date'
import openTotal from './openTotal'
import _ from 'lodash'
export default {
  name: 'districtLeft',

  props: ['controlInfo', 'controlInfoList'],

  components: {
    openTotal
  },
  computed: {
    info () {
      let res
      if (!this.pm25) {
        res = {
          pm25: 0,
          color: 'green'
        }
      } else {
        res = this.pm25
      }
      let openSum = 0
      if (this.controlInfoList && this.controlInfoList.length) {
        let todayOpenSum = _.filter(this.controlInfoList, item => {
          return item.openDate === formatDate(new Date(), 'yyyy-MM-dd', true)
        })
        if (todayOpenSum && todayOpenSum.length) {
          todayOpenSum.forEach(item => {
            openSum += item.count
          })
        }
      }
      return [{
        title: '今日总开门次数',
        value: openSum,
        span: 24,
        type: res.color
      }]
    },
    info2 () {
      return this.controlInfo
    }
  },
  mounted () {
    setTimeout(this.initialize, 400)
    // 获取空气质量检测仪数据
    this.requestRestfulData()
  },

  methods: {
    // initialize () {
    //   this.show = true
    // },
    requestRestfulData () {
      this.$store.dispatch('updatePM25')
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../../../assets/stylus/base'
.middle-area-districtLeft
  margin-top 3vmin
  font-size normal
  .position {
   padding-left: 50px;
   box-sizing: border-box;
  }
  .text-content-top
    padding-top 19%
    padding-bottom: 3vmin;  
    font-weight 100
    margin 0 20px
  .text-content-bottom
    padding-top 6.3%
    font-weight 100
    margin 0 20px
</style>